<template>
	<view class="add-container">
		<!-- 顶部状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 头部区域 -->
		<view class="header-section">
			<!-- 自定义导航栏 -->
			<view class="custom-navbar">
				<view class="nav-left" @click="goBack">
					<text class="nav-icon"><</text>
				</view>
				<view class="nav-title">
					<text class="nav-title-text">{{ isEdit ? '编辑待办' : '新建待办' }}</text>
				</view>
				<view class="nav-right">
					<text 
						class="nav-save" 
						:class="{ 'nav-save-disabled': isSaving }"
						@click="handleSave"
					>
						{{ isSaving ? '保存中...' : '保存' }}
					</text>
				</view>
			</view>
		</view>
		
		<!-- 表单区域 -->
		<scroll-view scroll-y class="form-scroll">
			<view class="form-container">
				<!-- 标题输入 -->
				<view class="form-section">
					<view class="section-title">
						<text class="section-title-text">待办标题</text>
						<text class="required-mark">*</text>
					</view>
					<view class="input-wrapper">
						<input 
							class="title-input" 
							placeholder="输入待办标题..." 
							v-model="formData.title"
							:focus="!isEdit"
							maxlength="50"
						/>
						<text class="char-count">{{ formData.title.length }}/50</text>
					</view>
				</view>
				
				<!-- 描述输入 -->
				<view class="form-section">
					<view class="section-title" @click="toggleDescription">
						<text class="section-title-text">待办描述</text>
						<text class="optional-mark">选填</text>
						<text class="expand-icon" :class="{ expanded: showDescription }">{{ showDescription ? '▼' : '▶' }}</text>
					</view>
					<view v-if="showDescription" class="textarea-wrapper">
						<textarea 
							class="description-textarea" 
							placeholder="添加更多详细信息..."
							v-model="formData.description"
							maxlength="200"
							auto-height
							:focus="justExpanded"
						></textarea>
						<text class="char-count">{{ formData.description.length }}/200</text>
					</view>
					<view v-else-if="formData.description.trim()" class="description-preview" @click="toggleDescription">
						<text class="preview-text">{{ formData.description.trim() }}</text>
					</view>
				</view>
				
				<!-- 优先级选择 -->
				<view class="form-section">
					<view class="section-title">
						<text class="section-title-text">优先级</text>
					</view>
					<view class="priority-options">
						<view 
							v-for="priority in priorityOptions" 
							:key="priority.value"
							class="priority-option"
							:class="{ active: formData.priority === priority.value }"
							@click="setPriority(priority.value)"
						>
							<view class="priority-color" :class="'priority-' + priority.value"></view>
							<text class="priority-label">{{ priority.label }}</text>
							<view v-if="formData.priority === priority.value" class="priority-check">✓</view>
						</view>
					</view>
				</view>
				
				<!-- 待办时间选择 -->
				<view class="form-section">
					<view class="section-title">
						<text class="section-title-text">待办时间</text>
						<text class="required-mark">*</text>
					</view>
					
					<!-- 日期选择 -->
					<view class="datetime-section">
						<text class="datetime-label">选择日期</text>
						<view class="date-options">
							<view 
								v-for="dateOption in dateOptions" 
								:key="dateOption.key"
								class="date-option compact"
								:class="{ active: selectedDateKey === dateOption.key }"
								@click="setQuickDate(dateOption.key, dateOption.value)"
							>
								<text class="date-icon">{{ dateOption.icon }}</text>
								<text class="date-label">{{ dateOption.label }}</text>
							</view>
							
							<!-- 自定义日期选择 -->
							<picker 
								mode="date" 
								:value="customDate" 
								:start="minDate"
								:end="maxDate"
								@change="onCustomDateChange"
							>
								<view 
									class="date-option compact custom-date-option"
									:class="{ active: selectedDateKey === 'custom' }"
								>
									<text class="date-icon">🗓️</text>
									<text class="date-label">自定义</text>
								</view>
							</picker>
						</view>
						
						<!-- 选中日期显示 -->
						<view v-if="selectedDate" class="selected-date-display">
							<text class="selected-date-text">已选择：{{ formatSelectedDateDisplay() }}</text>
						</view>
					</view>
					
					<!-- 时间选择 -->
					<view v-if="selectedDate" class="datetime-section">
						<text class="datetime-label">选择时间（必选）</text>
						<picker 
							mode="time" 
							:value="selectedTime || '09:00'" 
							@change="onTimeChange"
						>
							<view class="time-picker-button">
								<text class="time-picker-icon">🕐</text>
								<text class="time-picker-text">{{ selectedTime || '点击选择时间' }}</text>
								<text class="time-picker-arrow">▶</text>
							</view>
						</picker>
						
						<!-- 清除时间按钮 -->
						<view v-if="selectedTime" class="clear-time-button" @click="clearTime">
							<text class="clear-time-text">清除时间</text>
						</view>
					</view>
				</view>
				
				<!-- 创建时间显示（编辑模式） -->
				<view v-if="isEdit && originalTodo && originalTodo.createTime" class="form-section">
					<view class="section-title">
						<text class="section-title-text">创建时间</text>
					</view>
					<view class="info-display">
						<text class="info-text">{{ formatDisplayDate(originalTodo.createTime) }}</text>
					</view>
				</view>
				
				<!-- 删除按钮（编辑模式） -->
				<view v-if="isEdit" class="form-section">
					<view class="delete-section" @click="confirmDelete">
						<text class="delete-text">🗑️ 删除待办</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getTodoById, createTodo, updateTodo, deleteTodo } from '../../api/todo'

export default {
	data() {
		return {
			statusBarHeight: 0,
			isEdit: false,
			editId: null,
			originalTodo: null,
			formData: {
				title: '',
				description: '',
				priority: 'medium',
				dueDate: ''
			},
			priorityOptions: [
				{ value: 'high', label: '高优先级', color: '#ff4757' },
				{ value: 'medium', label: '中优先级', color: '#ffa502' },
				{ value: 'low', label: '低优先级', color: '#2ed573' }
			],
			dateOptions: [],
			customDate: '',
			customDateText: '选择日期',
			minDate: '',
			maxDate: '',
			// 时间选择相关
			selectedDate: '',
			selectedTime: '',
			selectedDateKey: '',
			// 描述展开状态
			showDescription: false,
			justExpanded: false,
			isSaving: false
		}
	},
	
	onLoad(options) {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight;
		
		// 初始化日期选项
		this.initDateOptions();
		
		// 检查是否为编辑模式
		if (options.id) {
			this.isEdit = true;
			this.editId = parseInt(options.id);
			this.loadTodoForEdit();
		}
	},
	
	methods: {
		async loadTodoForEdit() {
			try {
				// 从后端API获取待办详情
				const response = await getTodoById(this.editId);
				
				if (response && response.code === 200 && response.data) {
					const todo = response.data;
					this.originalTodo = { ...todo };
					this.formData = {
						title: todo.title,
						description: todo.description || '',
						priority: todo.priority || 'medium',
						dueDate: ''
					};
					
					// 组合日期和时间
					if (todo.dueDate) {
						if (todo.dueTime) {
							this.formData.dueDate = `${todo.dueDate} ${todo.dueTime}`;
						} else {
							this.formData.dueDate = todo.dueDate;
						}
					}
					
					// 如果有描述内容，默认展开描述区域
					if (todo.description && todo.description.trim()) {
						this.showDescription = true;
					}
					
					// 解析已有的待办时间
					if (this.formData.dueDate) {
						this.parseDueDateTime(this.formData.dueDate);
					}
				} else {
					// API返回错误
					console.error('获取待办详情失败:', response);
					uni.showToast({
						title: response?.message || '待办不存在',
						icon: 'error'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			} catch (error) {
				console.error('加载待办详情异常:', error);
				
				// 网络错误时，降级到本地存储获取
				try {
					const todoList = uni.getStorageSync('todoList') || [];
					const localTodo = todoList.find(t => t.id === this.editId);
					
					if (localTodo) {
						this.originalTodo = { ...localTodo };
						this.formData = {
							title: localTodo.title,
							description: localTodo.description || '',
							priority: localTodo.priority || 'medium',
							dueDate: ''
						};
						
						// 组合日期和时间（本地存储可能是旧格式）
						if (localTodo.dueDate) {
							if (localTodo.dueTime) {
								this.formData.dueDate = `${localTodo.dueDate} ${localTodo.dueTime}`;
							} else {
								this.formData.dueDate = localTodo.dueDate;
							}
						}
						
						// 如果有描述内容，默认展开描述区域
						if (localTodo.description && localTodo.description.trim()) {
							this.showDescription = true;
						}
						
						// 解析已有的待办时间
						if (this.formData.dueDate) {
							this.parseDueDateTime(this.formData.dueDate);
						}
						
						uni.showToast({
							title: '网络连接失败，使用本地数据',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '网络连接失败且本地无数据',
							icon: 'error'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				} catch (localError) {
					console.error('降级获取本地数据也失败:', localError);
					uni.showToast({
						title: '加载失败',
						icon: 'error'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}
			}
		},
		
		setPriority(priority) {
			this.formData.priority = priority;
		},
		
		// 切换描述展开状态
		toggleDescription() {
			this.showDescription = !this.showDescription;
			if (this.showDescription) {
				this.justExpanded = true;
				// 短暂延迟后取消焦点状态，避免一直聚焦
				setTimeout(() => {
					this.justExpanded = false;
				}, 500);
			}
		},
		
		// 初始化日期选项
		initDateOptions() {
			const today = new Date();
			const tomorrow = new Date(today);
			tomorrow.setDate(tomorrow.getDate() + 1);
			const dayAfterTomorrow = new Date(today);
			dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);
			
			this.dateOptions = [
				{
					key: 'today',
					label: '今天',
					date: this.formatDateDisplay(today),
					value: this.formatDateValue(today),
					icon: '⭐'
				},
				{
					key: 'tomorrow',
					label: '明天',
					date: this.formatDateDisplay(tomorrow),
					value: this.formatDateValue(tomorrow),
					icon: '⏰'
				},
				{
					key: 'dayAfterTomorrow',
					label: '后天',
					date: this.formatDateDisplay(dayAfterTomorrow),
					value: this.formatDateValue(dayAfterTomorrow),
					icon: '📅'
				}
			];
			

			
			// 设置日期选择器的范围
			const currentYear = today.getFullYear();
			this.minDate = this.formatDateValue(today);
			this.maxDate = `${currentYear + 1}-12-31`;
			this.customDate = this.formatDateValue(today);
		},
		
		// 设置快捷日期
		setQuickDate(dateKey, dateValue) {
			this.selectedDateKey = dateKey;
			this.selectedDate = dateValue;
			this.updateDueDateTime();
		},
		
		// 处理自定义日期选择
		onCustomDateChange(e) {
			const dateStr = e.detail.value;
			this.customDate = dateStr;
			this.selectedDateKey = 'custom';
			this.selectedDate = dateStr;
			this.updateDueDateTime();
		},
		
		// 处理时间选择
		onTimeChange(e) {
			const timeStr = e.detail.value;
			this.selectedTime = timeStr;
			this.updateDueDateTime();
		},
		
		// 清除时间
		clearTime() {
			this.selectedTime = '';
			this.updateDueDateTime();
		},
		
		// 更新完整的待办时间
		updateDueDateTime() {
			if (this.selectedDate && this.selectedTime) {
				this.formData.dueDate = `${this.selectedDate} ${this.selectedTime}`;
			} else if (this.selectedDate) {
				this.formData.dueDate = this.selectedDate;
			} else {
				this.formData.dueDate = '';
			}
		},
		
		// 检查是否为快捷日期
		isQuickDate(dateValue) {
			return this.dateOptions.some(option => option.value === dateValue);
		},
		

		
		// 格式化选中日期显示
		formatSelectedDateDisplay() {
			if (!this.selectedDate) return '';
			
			const date = new Date(this.selectedDate);
			const today = new Date();
			const tomorrow = new Date(today);
			tomorrow.setDate(tomorrow.getDate() + 1);
			const dayAfterTomorrow = new Date(today);
			dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);
			
			const targetDateStr = this.formatDateValue(date);
			const todayStr = this.formatDateValue(today);
			const tomorrowStr = this.formatDateValue(tomorrow);
			const dayAfterTomorrowStr = this.formatDateValue(dayAfterTomorrow);
			
			if (targetDateStr === todayStr) return '今天';
			if (targetDateStr === tomorrowStr) return '明天';
			if (targetDateStr === dayAfterTomorrowStr) return '后天';
			
			return `${date.getMonth() + 1}月${date.getDate()}日`;
		},
		
		// 格式化日期显示（月/日）
		formatDateDisplay(date) {
			const month = date.getMonth() + 1;
			const day = date.getDate();
			return `${month}/${day}`;
		},
		
		// 格式化日期值（YYYY-MM-DD）
		formatDateValue(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		},
		
		// 解析待办时间
		parseDueDateTime(dueDateStr) {
			if (!dueDateStr) return;
			
			// 检查是否包含时间（格式：YYYY-MM-DD HH:mm）
			if (dueDateStr.includes(' ')) {
				const [datePart, timePart] = dueDateStr.split(' ');
				this.selectedDate = datePart;
				this.selectedTime = timePart;
			} else {
				// 只有日期
				this.selectedDate = dueDateStr;
				this.selectedTime = '';
			}
			
			// 设置自定义日期
			this.customDate = this.selectedDate;
			
			// 检查是否为快捷日期
			const quickDateOption = this.dateOptions.find(option => option.value === this.selectedDate);
			if (quickDateOption) {
				this.selectedDateKey = quickDateOption.key;
			} else {
				this.selectedDateKey = 'custom';
			}
		},
		
		// 处理保存按钮点击
		handleSave() {
			if (this.isSaving) {
				return; // 如果正在保存中，直接返回
			}
			this.saveTodo();
		},
		
		async saveTodo() {
			if (!this.formData.title.trim()) {
				uni.showToast({
					title: '请输入待办标题',
					icon: 'none'
				});
				return;
			}
			
			// 验证日期必选
			if (!this.selectedDate) {
				uni.showToast({
					title: '请选择日期',
					icon: 'none'
				});
				return;
			}
			
			// 验证时间必选
			if (!this.selectedTime) {
				uni.showToast({
					title: '请选择时间',
					icon: 'none'
				});
				return;
			}
			
			try {
				this.isSaving = true;
				
				if (this.isEdit) {
					// 编辑模式：调用API更新
					const updateData = {
						id: this.editId,
						title: this.formData.title.trim(),
						description: this.formData.description.trim(),
						priority: this.formData.priority
					};
					
					// 处理待办时间字段
					if (this.formData.dueDate && this.formData.dueDate.trim()) {
						const dueDateStr = this.formData.dueDate.trim();
						if (dueDateStr.includes(' ')) {
							// 包含时间的格式：YYYY-MM-DD HH:mm
							const [datePart, timePart] = dueDateStr.split(' ');
							updateData.dueDate = datePart;
							updateData.dueTime = timePart;
						} else {
							// 只有日期的格式：YYYY-MM-DD
							updateData.dueDate = dueDateStr;
						}
					}
					
					await updateTodo(updateData);
					
					// 同时更新本地存储
					const todoList = uni.getStorageSync('todoList') || [];
					const todoIndex = todoList.findIndex(t => t.id === this.editId);
					if (todoIndex !== -1) {
						todoList[todoIndex] = {
							...todoList[todoIndex],
							title: this.formData.title.trim(),
							description: this.formData.description.trim(),
							priority: this.formData.priority,
							dueDate: this.formData.dueDate,
							updatedAt: this.formatDate(new Date())
						};
						uni.setStorageSync('todoList', todoList);
					}
					
					uni.showToast({
						title: '更新成功',
						icon: 'success'
					});
				} else {
					// 新建模式：调用API创建
					const newTodoData = {
						title: this.formData.title.trim(),
						description: this.formData.description.trim(),
						priority: this.formData.priority
					};
					
					// 处理待办时间字段
					if (this.formData.dueDate && this.formData.dueDate.trim()) {
						const dueDateStr = this.formData.dueDate.trim();
						if (dueDateStr.includes(' ')) {
							// 包含时间的格式：YYYY-MM-DD HH:mm
							const [datePart, timePart] = dueDateStr.split(' ');
							newTodoData.dueDate = datePart;
							newTodoData.dueTime = timePart;
						} else {
							// 只有日期的格式：YYYY-MM-DD
							newTodoData.dueDate = dueDateStr;
						}
					}
					
					const response = await createTodo(newTodoData);
					
					// 如果API调用成功，更新本地存储
					if (response && response.code === 200) {
						const todoList = uni.getStorageSync('todoList') || [];
						const newTodo = response.data || {
							id: todoList.length > 0 ? Math.max(...todoList.map(t => t.id)) + 1 : 1,
							...newTodoData,
							completed: false,
							createTime: this.formatDate(new Date())
						};
						
						todoList.unshift(newTodo);
						uni.setStorageSync('todoList', todoList);
					}
					
					uni.showToast({
						title: '创建成功',
						icon: 'success'
					});
				}
				
				setTimeout(() => {
					uni.navigateBack();
				}, 800);
				
			} catch (error) {
				console.error('保存待办失败:', error);
				
				// 网络错误时，降级到本地存储处理
				this.saveToLocal();
			} finally {
				this.isSaving = false;
			}
		},
		
		// 降级方案：保存到本地存储
		saveToLocal() {
			this.isSaving = true;
			
			const todoList = uni.getStorageSync('todoList') || [];
			
			if (this.isEdit) {
				// 编辑模式
				const todoIndex = todoList.findIndex(t => t.id === this.editId);
				if (todoIndex !== -1) {
					todoList[todoIndex] = {
						...todoList[todoIndex],
						title: this.formData.title.trim(),
						description: this.formData.description.trim(),
						priority: this.formData.priority,
						dueDate: this.formData.dueDate,
						updatedAt: this.formatDate(new Date())
					};
					
					uni.setStorageSync('todoList', todoList);
				}
			} else {
				// 新建模式
				const newId = todoList.length > 0 ? Math.max(...todoList.map(t => t.id)) + 1 : 1;
				
				const newTodo = {
					id: newId,
					title: this.formData.title.trim(),
					description: this.formData.description.trim(),
					priority: this.formData.priority,
					dueDate: this.formData.dueDate,
					completed: false,
					createTime: this.formatDate(new Date())
				};
				
				todoList.unshift(newTodo);
				uni.setStorageSync('todoList', todoList);
			}
			
			uni.showToast({
				title: '已保存到本地',
				icon: 'success'
			});
			
			setTimeout(() => {
				this.isSaving = false;
				uni.navigateBack();
			}, 800);
		},
		
		confirmDelete() {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个待办吗？此操作无法撤销。',
				confirmColor: '#ff4757',
				success: (res) => {
					if (res.confirm) {
						this.deleteTodo();
					}
				}
			});
		},
		
		async deleteTodo() {
			try {
				// 调用后端API删除
				await deleteTodo(this.editId);
				
				// 同时从本地存储删除
				const todoList = uni.getStorageSync('todoList') || [];
				const newList = todoList.filter(t => t.id !== this.editId);
				uni.setStorageSync('todoList', newList);
				
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				});
				
			} catch (error) {
				console.error('删除待办失败:', error);
				
				// 网络错误时，仍然从本地删除
				const todoList = uni.getStorageSync('todoList') || [];
				const newList = todoList.filter(t => t.id !== this.editId);
				uni.setStorageSync('todoList', newList);
				
				uni.showToast({
					title: '已从本地删除',
					icon: 'success'
				});
			}
			
			setTimeout(() => {
				uni.navigateBack();
			}, 800);
		},
		
		goBack() {
			// 检查是否有未保存的更改
			if (this.hasUnsavedChanges()) {
				uni.showModal({
					title: '提示',
					content: '您有未保存的更改，确定要离开吗？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack();
						}
					}
				});
			} else {
				uni.navigateBack();
			}
		},
		
		hasUnsavedChanges() {
			if (!this.isEdit) {
				return this.formData.title.trim() || this.formData.description.trim() || this.formData.dueDate;
			} else {
				if (!this.originalTodo) return false;
				return (
					this.formData.title !== this.originalTodo.title ||
					this.formData.description !== (this.originalTodo.description || '') ||
					this.formData.priority !== (this.originalTodo.priority || 'medium') ||
					this.formData.dueDate !== (this.originalTodo.dueDate || '')
				);
			}
		},
		
		formatDate(date) {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}`;
		},
		
		formatDisplayDate(dateStr) {
			if (!dateStr) return '';
			
			// 处理ISO 8601格式（如 2025-06-10T15:21:03）
			let date;
			date = new Date(dateStr);
			
			// 检查日期是否有效
			if (isNaN(date.getTime())) {
				console.warn('无效的日期格式:', dateStr);
				return dateStr;
			}
			
			return date.toLocaleString('zh-CN', {
				year: 'numeric',
				month: 'long',
				day: 'numeric',
				hour: '2-digit',
				minute: '2-digit'
			});
		}
	}
}
</script>

<style>
.add-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.status-bar {
	background: transparent;
}

/* 头部区域 */
.header-section {
	padding: 20rpx 30rpx 40rpx;
	background: transparent;
}

/* 自定义导航栏 */
.custom-navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: transparent;
}

.nav-left {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 20rpx;
	backdrop-filter: blur(10rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s ease;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.nav-left:active {
	background: rgba(255, 255, 255, 0.25);
	transform: scale(0.95);
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
}

.nav-icon {
	font-size: 32rpx;
	color: white;
	font-weight: 600;
	text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.nav-title {
	flex: 1;
	text-align: center;
}

.nav-title-text {
	font-size: 32rpx;
	color: white;
	font-weight: 600;
}

.nav-right {
	width: 80rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-save {
	font-size: 28rpx;
	color: white;
	background: rgba(255, 255, 255, 0.2);
	padding: 15rpx 40rpx;
	border-radius: 25rpx;
	backdrop-filter: blur(10rpx);
	min-width: 120rpx;
	text-align: center;
	font-weight: 500;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	writing-mode: horizontal-tb;
}

.nav-save:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.95);
}

.nav-save-disabled {
	background: rgba(255, 255, 255, 0.2);
	cursor: not-allowed;
	opacity: 0.6;
}

.nav-save-disabled:active {
	transform: none;
	background: rgba(255, 255, 255, 0.2);
}

/* 表单区域 */
.form-scroll {
	flex: 1;
	background: white;
	border-radius: 30rpx 30rpx 0 0;
}

.form-container {
	padding: 30rpx 30rpx 40rpx;
}

.form-section {
	margin-bottom: 50rpx;
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	cursor: pointer;
	transition: all 0.3s ease;
}

.section-title:hover {
	opacity: 0.8;
}

.section-title-text {
	font-size: 30rpx;
	color: #333;
	font-weight: 600;
}

.required-mark {
	font-size: 24rpx;
	color: #ff4757;
	margin-left: 8rpx;
}

.optional-mark {
	font-size: 22rpx;
	color: #999;
	margin-left: 8rpx;
	background: #f8f9fa;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
}

.expand-icon {
	font-size: 20rpx;
	color: #666;
	margin-left: auto;
	transition: transform 0.3s ease;
}

.expand-icon.expanded {
	transform: rotate(0deg);
}

/* 描述预览 */
.description-preview {
	padding: 25rpx;
	background: #f8f9fa;
	border: 2rpx solid #e9ecef;
	border-radius: 20rpx;
	cursor: pointer;
	transition: all 0.3s ease;
}

.description-preview:hover {
	border-color: #007AFF;
	background: #f0f8ff;
}

.preview-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 标题输入 */
.input-wrapper {
	position: relative;
}

.title-input {
	width: 100%;
	height: 100rpx;
	padding: 0 25rpx;
	border: 2rpx solid #e9ecef;
	border-radius: 20rpx;
	background: #f8f9fa;
	font-size: 30rpx;
	color: #333;
	transition: all 0.3s ease;
}

.title-input:focus {
	border-color: #007AFF;
	background: white;
}

/* 描述输入 */
.textarea-wrapper {
	position: relative;
}

.description-textarea {
	width: 100%;
	min-height: 120rpx;
	padding: 25rpx;
	border: 2rpx solid #e9ecef;
	border-radius: 20rpx;
	background: #f8f9fa;
	font-size: 28rpx;
	color: #333;
	line-height: 1.5;
	transition: all 0.3s ease;
}

.description-textarea:focus {
	border-color: #007AFF;
	background: white;
}

.char-count {
	position: absolute;
	right: 15rpx;
	bottom: 15rpx;
	font-size: 22rpx;
	color: #999;
}

/* 优先级选择 */
.priority-options {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.priority-option {
	display: flex;
	align-items: center;
	padding: 25rpx;
	border: 2rpx solid #e9ecef;
	border-radius: 20rpx;
	background: #f8f9fa;
	transition: all 0.3s ease;
}

.priority-option.active {
	border-color: #007AFF;
	background: #f0f8ff;
}

.priority-color {
	width: 24rpx;
	height: 24rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.priority-high {
	background: #ff4757;
}

.priority-medium {
	background: #ffa502;
}

.priority-low {
	background: #2ed573;
}

.priority-label {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.priority-check {
	font-size: 24rpx;
	color: #007AFF;
	font-weight: bold;
}

/* 信息显示 */
.info-display {
	padding: 25rpx;
	background: #f8f9fa;
	border-radius: 20rpx;
	border: 2rpx solid #e9ecef;
}

.info-text {
	font-size: 28rpx;
	color: #666;
}

/* 日期时间选择 */
.datetime-section {
	margin-bottom: 30rpx;
}

.datetime-label {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 15rpx;
	display: block;
	font-weight: 500;
}

.date-options {
	display: flex;
	flex-wrap: wrap;
	gap: 10rpx;
	margin-bottom: 15rpx;
}

.date-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15rpx 20rpx;
	border: 2rpx solid #e9ecef;
	border-radius: 15rpx;
	background: #f8f9fa;
	transition: all 0.3s ease;
	min-width: 120rpx;
}

.date-option.compact {
	flex-direction: column;
	padding: 15rpx 20rpx;
}

.date-option.active {
	border-color: #007AFF;
	background: #f0f8ff;
}

.custom-date-option {
	border-style: dashed;
}

.custom-date-option.active {
	border-style: solid;
}

.date-icon {
	font-size: 24rpx;
	margin-bottom: 8rpx;
}

.date-label {
	font-size: 24rpx;
	color: #333;
	font-weight: 500;
	text-align: center;
}

/* 时间选择器 */
.time-picker-button {
	display: flex;
	align-items: center;
	padding: 25rpx;
	border: 2rpx solid #e9ecef;
	border-radius: 20rpx;
	background: #f8f9fa;
	transition: all 0.3s ease;
	margin-bottom: 15rpx;
}

.time-picker-button:active {
	border-color: #007AFF;
	background: #f0f8ff;
}

.time-picker-icon {
	font-size: 32rpx;
	margin-right: 15rpx;
}

.time-picker-text {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.time-picker-arrow {
	font-size: 20rpx;
	color: #666;
}

.clear-time-button {
	padding: 15rpx 25rpx;
	background: #fff5f5;
	border: 2rpx solid #fed7d7;
	border-radius: 15rpx;
	text-align: center;
	transition: all 0.3s ease;
}

.clear-time-button:active {
	background: #fecaca;
}

.clear-time-text {
	font-size: 24rpx;
	color: #dc2626;
	font-weight: 500;
}

/* 选中显示 */
.selected-date-display {
	padding: 15rpx 20rpx;
	background: #e8f5e8;
	border-radius: 10rpx;
	border: 1rpx solid #c3e6c3;
}

.selected-date-text {
	font-size: 24rpx;
	color: #2d5a2d;
	font-weight: 500;
}

/* 删除区域 */
.delete-section {
	padding: 25rpx;
	background: #fff5f5;
	border: 2rpx solid #fed7d7;
	border-radius: 20rpx;
	text-align: center;
}

.delete-text {
	font-size: 28rpx;
	color: #ff4757;
	font-weight: 500;
}
</style> 